<template>
	<template v-if="loadOk">
		<uni-swiper-dot :info="goodsInfo.goods_detail.main" :current="swiperCurrent" mode="round">
			<swiper class="swiper_box" @change="onSwiperChange" autoplay circular interval="3000">
				<swiper-item v-for="(item, index) in goodsInfo.goods_detail.main" :key="index"
					@click="previewBanner(index)">
					<fr-image :src="imgHost + item" lazy-load mode="aspectFill" />
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view class="container">
			<view class="panel">
				<view class="price">
					<view class="now_price">
						<text>￥</text>
						<text class="num">{{ goodsInfo.goods_detail.sell_price_integer }}</text>
						<text>.{{ goodsInfo.goods_detail.sell_price_decimal }}</text>
					</view>
					<text class="origin_price">￥{{ goodsInfo.goods_detail.original_price }}</text>
				</view>
				<text class="saled">已售{{ goodsInfo.goods_detail.sales || 0 }}</text>
			</view>
			<view class="name_c">
				<view class="name">{{ goodsInfo.goods_detail.goods_title }}</view>
				<image v-if="userInfo && (userInfo.is_dis === 1 || userInfo.is_agent === 1)" @click="onTapShare"
					src="@/static/image/share.png" class="share" />
			</view>
			<view v-if="goodsInfo.goods_detail.goods_sub_title" class="sub_name">
				{{ goodsInfo.goods_detail.goods_sub_title }}
			</view>
			<view class="service">
				<text class="label">服务</text>
				<view class="method">
					<uni-icons v-if="goodsInfo.goods_detail.delivery===0||goodsInfo.goods_detail.delivery===1"
						type="checkmarkempty" size="18" color="#06dc0e"></uni-icons>
					<uni-icons v-else type="closeempty" size="18" color="#dc1418"></uni-icons>
					<text>快递物流</text>
				</view>
				<view class="method">
					<uni-icons v-if="goodsInfo.goods_detail.delivery===0||goodsInfo.goods_detail.delivery===2"
						type="checkmarkempty" size="18" color="#06dc0e"></uni-icons>
					<uni-icons v-else type="closeempty" size="18" color="#dc1418"></uni-icons>
					<text>支持自取</text>
				</view>
			</view>
			<view class="detail_head_c center">
				<view class="line"></view>
				<text>商品详情</text>
				<view class="line"></view>
			</view>
			<view v-html="goodsInfo.goods_detail.content" class="detail_content" />
		</view>
		<view class="brace env"></view>
		<view class="fixed_bar">
			<view class="main">
				<view class="left">
					<view class="item" hover-class="tapstate" @click="go('home')">
						<view class="icon_c">
							<image @click="share" src="@/static/image/tabbar-home.png" class="action_bar_icon" />
						</view>
						<view class="text">首页</view>
					</view>
					<view class="item" hover-class="tapstate" @click="go('cart')">
						<view class="icon_c">
							<image @click="share" src="@/static/image/tabbar-cart.png" class="action_bar_icon" />
						</view>
						<view class="text">购物车</view>
					</view>
				</view>
				<view class="button_c">
					<view class="button" @click="showPopup(true, 'add')" hover-class="tapstate">加入购物车</view>
					<view class="button" @click="showPopup(true, 'buy')" hover-class="tapstate">立即购买</view>
				</view>
			</view>
			<view class="env"></view>
		</view>
	</template>
	<!--加购或者购买弹出层-->
	<uni-popup v-if="goodsInfo.goods_detail.pic" ref="popupInstance" type="bottom" :safe-area="false">
		<view class="pupup_choose_c">
			<view class="closeable" hover-class="hover" @click="showPopup(false)">
				<uni-icons type="closeempty" size="20"></uni-icons>
			</view>
			<view class="goods">
				<view class="image">
					<fr-image :src="imgHost + goodsInfo.goods_detail.pic" mode="aspectFill" />
				</view>
				<view class="right_content">
					<view class="price">
						<text>￥</text>
						<text class="num">{{
                            currentSkuInfo
                                ? currentSkuInfo.sell_price_integer
                                : goodsInfo.goods_detail.sell_price_integer
                        }}</text>
						<text>.{{
                                currentSkuInfo
                                    ? currentSkuInfo.sell_price_decimal || '00'
                                    : goodsInfo.goods_detail.sell_price_decimal
                            }}</text>
					</view>
					<view class="name one-line">{{ goodsInfo.goods_detail.goods_title }}</view>
					<view class="sub_name one-line">{{
                        goodsInfo.goods_detail.goods_sub_title
                    }}</view>
				</view>
			</view>
			<view v-for="(item, index) in goodsInfo.attrs" :key="item.attr_id" class="attr">
				<view class="label">{{ item.attr_name }}：</view>
				<view class="children_c">
					<view v-for="(child, childIndex) in item.children" :key="child.av_id"
						@click="onAttrChange(index, childIndex)" class="children" hover-class="tapstate"
						:class="{ active: item.active_av_id == child.av_id }">
						{{ child.attr_val }}
					</view>
				</view>
			</view>
			<view class="stock">
				库存：{{
                    goodsInfo.attrs.length === 0
                        ? goodsInfo.goods_detail.stock
                        : currentSkuInfo
                        ? currentSkuInfo.stock
                        : '请选择'
                }}
				<template v-if="goodsInfo.goods_detail.is_limit == 1">
					<text style="padding-left: 20px">限购{{ goodsInfo.goods_detail.limit_num }}</text>
				</template>
			</view>
			<view class="sum_c">
				<view class="label">购买数量</view>
				<uni-number-box v-model="sum"
					:min="currentSkuInfo?Number(currentSkuInfo.stock)===0?0:1:Number(goodsInfo.goods_detail.stock)===0?0:1"
					:max="
                        currentSkuInfo
                            ? Number(currentSkuInfo.stock)
                            : Number(goodsInfo.goods_detail.stock)
                    " @change="onStepBlur" />
			</view>
			<button @click="operation" type="primary" :loading="operationLoading" class="button">
				确定
			</button>
			<view class="env"></view>
		</view>
	</uni-popup>
	<!--完善信息弹出层-->
	<u-modal :show="showImproveInformationModal" title="提示" content='请先完善个人信息，即将前往完善信息，是否立即前往？'
		:confirmColor="primaryColor" showCancelButton cancelText="关闭" confirmText="前往"
		@cancel="showImproveInformationModal=false"
		@confirm="showImproveInformationModal=false;$u.route('/pages/improveInformation/improveInformation')"></u-modal>
	<!--分享弹出层-->
	<uni-popup ref="sharePopupInstance" type="bottom" :safe-area="false">
		<view class="choose_share_methods">
			<view class="closeable" hover-class="hover" @click="showSharePopup(false)">
				<uni-icons type="closeempty" size="20"></uni-icons>
			</view>
			<view class="title">立即分享给好友</view>
			<view class="methods_c">
				<!-- #ifdef H5 -->
				<view @click="selectShareMethod(0)" class="item" hover-class="hover">
					<view class="icon center">
						<uni-icons type="paperclip" size="30" color="#666"></uni-icons>
					</view>
					<view class="text">复制链接</view>
				</view>
				<!-- #endif -->
				<view @click="selectShareMethod(1)" class="item" hover-class="hover">
					<view class="icon center">
						<uni-icons type="images-filled" size="30" color="#666"></uni-icons>
					</view>
					<view class="text">分享海报</view>
				</view>
			</view>
			<view class="brace"></view>
			<view class="cancel" @click="showSharePopup(false)" hover-class="tapstate">取消</view>
			<view class="env"></view>
		</view>
	</uni-popup>
	<canvas :style="canvasStyle" class="poster_canvas" canvas-id="poster" id="poster" type="2d"></canvas>
	<!--生成的海报图片弹窗-->
	<uni-popup ref="posterPopupInstance" type="center">
		<view class="post_c">
			<view @click="showPosterPopup(false)" class="close" hover-class="hover">
				<uni-icons type="clear" size="40rpx" :color="primaryColor"></uni-icons>
			</view>
			<!-- #ifdef H5 -->
			<view class="save_tip">长按图片保存至手机</view>
			<!-- #endif -->
			<image :src="posterImg" class="img" mode="widthFix" />
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<view @click="preservationPostImage" class="save center" hover-class="tapstate">保存到相册</view>
		<!-- #endif -->
	</uni-popup>
	<!--生成二维码的canvas-->
	<canvas canvas-id="qrcode" class="qrcode_canvas" />
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app';
	import { ref, reactive, computed, nextTick } from 'vue';
	import request from '@/utils/common/request/index';
	import { useUserStore } from '@/store/modules/useUserStore';
	import { useCacheStore } from '@/store/modules/useCacheStore';
	import { isAllIncludes, copy, getImageInfo, sleep } from '@/utils/common/index';
	// #ifdef H5
	import { H5Login, loadImg, setShareCard } from '@/utils/h5/index';
	// #endif
	import { drawRoundRect, dealWords } from '@/utils/common/canvas';
	// #ifdef MP-WEIXIN
	import { getCanvasCtx, getCanvasImageObj } from '@/utils/mp-weixin/canvas';
	// #endif
	import uQRCode from '@/utils/common/uqrcode';
	import { useGetThemColor } from '@/hooks/useGetThemColor';

	const { primaryColor, secondaryColor } = useGetThemColor();
	const { imgHost, host } = getApp().globalData;
	const userStore = useUserStore();
	let userInfo = computed(() => {
		return userStore.value;
	});

	let _productId = '';
	onLoad((option) => {
		_productId = option.id;
		getDetail(option.id);

		//  * 绑定上下级关系
		// #ifdef H5
		const { super_user_id } = option;
		const token = uni.getStorageSync('token');

		if (super_user_id) {
			if (token) {
				request({
					url: '/api/superuser',
					method: 'POST',
					data: { super_user_id },
				}).then(() => {
					uni.showToast({
						title: '绑定关系成功',
					});
					history.replaceState({},
						'',
						`/terminal/#/pages/productDetail/productDetail?id=${_productId}`
					);
				});
			} else {
				return uni.showModal({
					title: '提示',
					content: '请先授权登录',
					showCancel: false,
					confirmColor: primaryColor.value,
					success: function(res) {
						res.confirm && H5Login();
					},
				});
			}
		}
		// #endif
	});

	// * 获取产品详情
	let loadOk = ref(false);
	let goodsInfo = reactive({
		attrs: [],
		goods_detail: {},
		skus: [],
	});
	const getDetail = (id) => {
		request({
			url: `/api/goodsdetail?goods_id=${id}`,
			loadingTip: '加载中',
		}).then((data) => {
			let { skuAttr: attrs, detail: goods_detail, sku: skus } = data;
			[goods_detail.sell_price_integer, goods_detail.sell_price_decimal] =
			goods_detail.present_price.split('.');
			goodsInfo.attrs = attrs;
			if (goods_detail.content) {
				goods_detail.content = goods_detail.content.replace(
					/style=""/gi,
					'style="display:flex;width:100%;height:auto;"'
				);
			}
			goodsInfo.goods_detail = goods_detail;
			goodsInfo.skus = skus;
			loadOk.value = true;
			// #ifdef H5
			nextTick(() => {
				setShareInfoInit();
			})
			// #endif
		});
	};


	// #ifdef H5
	const setShareInfoInit = () => {
		setShareCard(
			goodsInfo.goods_detail.goods_title,
			goodsInfo.goods_detail.goods_sub_title,
			getShareLink(),
			imgHost + goodsInfo.goods_detail.pic
		)
	}

	const getShareLink = () => {
		const canShare = userInfo.value && (userInfo.value.is_dis === 1 || userInfo.value.is_agent === 1);
		const shareLink =
			`${host}/terminal/#/pages/productDetail/productDetail?id=${_productId}${canShare?'&super_user_id='+userInfo.value.user_id:''}`;
		return shareLink;
	};
	// #endif

	// * 轮播图
	let swiperCurrent = ref(0);
	const onSwiperChange = (e) => {
		swiperCurrent.value = e.detail.current;
	};

	// * 导航前往
	const go = (path) => {
		uni.switchTab({
			url: `/pages/${path}/${path}`,
		});
	};

	// * 购买或者加购弹出层
	let _showChooseType = 0; //0加入购物车弹框  1直接购买弹框
	let sum = ref(1); //加入、购买数量
	let operationLoading = ref(false); //按钮loading
	const popupInstance = ref(null);
	const showPopup = (flag, type) => {
		if (type) _showChooseType = { add: 0, buy: 1 } [type];
		if (currentSkuInfo.value) {
			if (Number(currentSkuInfo.value.stock) === 0) sum.value = 0;
		} else {
			if (Number(goodsInfo.goods_detail.stock) === 0) sum.value = 0;
		}
		flag ? popupInstance.value.open() : popupInstance.value.close();
	};
	const onStepBlur = (value) => {
		if (currentSkuInfo.value) {
			if (value > currentSkuInfo.value.stock) {
				uni.showToast({
					title: '库存不足' + value,
					icon: 'none',
				});
				sum.value = currentSkuInfo.value.stock;
			}
		}
	};
	// * 点击确认按钮
	const operation = () => {
		if (goodsInfo.attrs.length > 0 && !currentSkuInfo.value)
			return uni.showToast({
				title: '请选择规格',
				icon: 'none',
			});

		if (sum.value === 0) return uni.showToast({
			title: '库存不足',
			icon: 'none',
		});

		operationLoading.value = true;

		if (_showChooseType === 0) {
			//加入购物车操作
			request({
					url: '/api/addcar',
					method: 'POST',
					data: {
						goods_id: goodsInfo.goods_detail.goods_id,
						sku_key: goodsInfo.attrs.length > 0 ?
							currentSkuInfo.value.sku_key : goodsInfo.goods_detail.goods_id, //如果没有sku传goods_id
						buy_num: sum.value,
					},
				})
			.then(() => {
				uni.showToast({
					title: '加入成功',
					icon: 'success',
				});
				showPopup(false);
				sum.value = 1;
			})
			.finally(() => {
				operationLoading.value = false;
			});
		} else {
			//立即购买操作
			goSettlement();
		}
	};
	// *结算
	const goSettlement = () => {
		request({
				url: '/api/nyzf',
				method: 'POST',
				data: {
					goods: [{
						goods_id: goodsInfo.goods_detail.goods_id,
						sku_key: goodsInfo.attrs.length > 0 ?
							currentSkuInfo.value.sku_key : goodsInfo.goods_detail
						.goods_id, //如果没有sku传goods_id
						buy_num: sum.value,
					}, ],
				},
			})
		.then(data => {
			data.enableDeliveryMethod = goodsInfo.goods_detail.delivery;
			const cacheStore = useCacheStore();
			cacheStore.setStorageData({
				data: data,
				field: 'odrerStorage',
			});
			showPopup(false);
			sum.value = 1;
			uni.navigateTo({
				url: `/pages/settlement/settlement`,
			});
		})
		.finally(() => {
			operationLoading.value = false;
		});
	};

	// * 选择规格
	let currentSkuInfo = ref(null); //当前匹配的规格信息
	const onAttrChange = (index, childIndex) => {
		//规格点击事件
		if (
			goodsInfo.attrs[index].children[childIndex].av_id ===
			goodsInfo.attrs[index].active_av_id
		)
			return;
		goodsInfo.attrs[index].active_av_id =
			goodsInfo.attrs[index].children[childIndex].av_id.toString();

		let _av_idS = [];
		for (let i = 0; i < goodsInfo.attrs.length; i++) {
			let item = goodsInfo.attrs[i];
			if (!item.active_av_id) return; //直接跳出 onAttrChange函数
			_av_idS.push(item.active_av_id);
		}
		// * 缺少规格
		if (_av_idS.length !== goodsInfo.attrs.length) return;
		// * 匹配规格
		let currentSkuInfo_copy = getInfoByAttrs(_av_idS);
		[currentSkuInfo_copy.sell_price_integer, currentSkuInfo_copy.sell_price_decimal] =
		currentSkuInfo_copy.price.split('.');
		currentSkuInfo.value = currentSkuInfo_copy;
		if (Number(currentSkuInfo.value.stock) === 0) sum.value = 0;
	};

	function getInfoByAttrs(av_idS) {
		//根据规格组合集合筛选出具体规格数据
		return goodsInfo.skus.sku_val.filter((item) => {
			const goodsAttrsAv_ids = item.attrArr.map((item) => item.av_id.toString());
			return isAllIncludes(goodsAttrsAv_ids, av_idS);
		})[0];
	}

	// * 预览轮播图
	const previewBanner = (index) => {
		if (!goodsInfo.goods_detail?.main) return;
		const urls = goodsInfo.goods_detail.main.map((item) => {
			return imgHost + item;
		});
		uni.previewImage({
			current: index,
			urls,
			loop: true,
			indicator: 'default',
		});
	};

	// * 分享
	const showImproveInformationModal = ref(false);
	const sharePopupInstance = ref(null);
	const showSharePopup = (flag) => {
		if (userInfo.value && userInfo.value.is_perfect_info === 2) {
			return showImproveInformationModal.value = true;
		}
		flag ? sharePopupInstance.value.open() : sharePopupInstance.value.close();
	};
	const onTapShare = () => {
		const token = uni.getStorageSync('token');
		if (!token) {
			// #ifdef H5
			return uni.showModal({
				title: '提示',
				content: '登录失效！请您重新登录',
				showCancel: false,
				confirmColor: primaryColor.value,
				success: function(res) {
					res.confirm && H5Login();
				},
			});
			// #endif

			// #ifdef MP-WEIXIN
			return;
			// #endif
		}
		showSharePopup(true);
	};
	const selectShareMethod = (type) => {
		showSharePopup(false);
		if (type === 0) {
			const path =
				host +
				'/terminal/#/pages/productDetail/productDetail?id=' +
				_productId +
				'&super_user_id=' +
				userInfo.value.user_id;
			copy(path);
		} else {
			generate();
		}
	};

	// * 绘制海报
	const posterPopupInstance = ref(null);
	let posterImg = ref('');
	const posterWidth = 375;
	let postHeight = ref(0);
	const canvasStyle = computed(() => {
		return `width:${posterWidth}px;height:${postHeight.value}px;`;
	});
	const generate = async () => {
		if (posterImg.value) return posterPopupInstance.value.open();
		uni.showLoading({
			title: '海报生成中',
			mask: true,
		});

		let productImg = '';
		let productImgHeight = '';
		let currentY = 0;

		try {
			let productImgPath = imgHost + goodsInfo.goods_detail.pic;
			// #ifdef H5
			let img = await loadImg(imgHost + goodsInfo.goods_detail.pic);
			productImgPath = img.src;
			// #endif

			const productImgInfo = await getImageInfo(productImgPath);

			// #ifdef MP-WEIXIN
			productImg = await getCanvasImageObj(imgHost + goodsInfo.goods_detail.pic);
			// #endif

			// #ifdef H5
			productImg = productImgInfo.path;
			// #endif

			productImgHeight = (posterWidth * productImgInfo.height) / productImgInfo.width;
			// * 图片高度加200即为海报的高度
			postHeight.value = productImgHeight + 200;
		} catch (e) {
			uni.hideLoading();
			return uni.showToast({
				title: '图片加载失败，请稍后再试！',
				icon: 'error',
			});
		}

		await nextTick();
		await sleep(300);

		let that = this;
		// * 开始绘制整张海报
		// #ifdef H5
		let ctx = uni.createCanvasContext('poster', this);
		// #endif

		// #ifdef MP-WEIXIN
		let { ctx, canvas } = await getCanvasCtx('poster');
		// #endif

		// * 绘制整个面板
		ctx.clearRect(0, 0, posterWidth, postHeight.value);
		ctx.fillStyle = '#fff';
		ctx.fillRect(0, 0, posterWidth, postHeight.value);
		// * 绘制面板圆角
		drawRoundRect(ctx, 0, 0, posterWidth, postHeight.value, 10);
		// * 绘制商品图片
		ctx.drawImage(productImg, 10, 10, posterWidth - 20, productImgHeight);

		// * 绘制二维码
		let qrcodeImg;
		const path =
			host +
			'/terminal/#/pages/productDetail/productDetail?id=' +
			_productId +
			'&super_user_id=' +
			userInfo.value.user_id;

		const qrcodeBase64 = await generateQrCode(path);
		// #ifdef H5
		qrcodeImg = qrcodeBase64;
		// #endif

		// #ifdef MP-WEIXIN
		try {
			// * 微信小程序不支持绘制base64格式图片
			// * 把base64格式图片转为binary格式图片，写入本地
			// * canvas绘制binary格式图片
			let filePath = await base64ToBinary({
				fileName: 'qrcodeImg',
				data: qrcodeBase64,
			});
			qrcodeImg = await getCanvasImageObj(filePath);
		} catch (res) {
			uni.hideLoading();
			return uni.showToast({
				title: '分享码加载失败，请稍后再试！',
				icon: 'error',
			});
		}
		// #endif

		currentY += productImgHeight + 20;
		ctx.drawImage(qrcodeImg, 10, currentY, 140, 140);

		// * 绘制标题
		ctx.fillStyle = '#000';
		dealWords({
			ctx: ctx, //画布上下文
			fontSize: 16, //字体大小
			word: goodsInfo.goods_detail.goods_title, //需要处理的文字
			maxWidth: posterWidth - 20 - 140 - 10, //一行文字最大宽度
			x: 160, //文字在x轴要显示的位置
			y: currentY, //文字在y轴要显示的位置
			maxLine: 3, //文字最多显示的行数
		});

		// * 绘制价格
		currentY += 135;
		ctx.font = `16px sans-serif`; //设置字体大小
		ctx.fillText(`￥ ${goodsInfo.goods_detail.present_price}`, 160, currentY);

		// * 转换成图片,小程序新的canvas为同步绘制且不需要draw,h5需要调用。

		// #ifdef H5
		// * 绘制完毕
		ctx.draw(false, () => {
			uni.canvasToTempFilePath({
				destWidth: posterWidth,
				destHeight: postHeight.value,
				height: postHeight.value,
				canvasId: 'poster',
				success: (res) => {
					posterImg.value = res.tempFilePath;
					showPosterPopup(true);
				},
				fail: (err) => {
					uni.showToast({
						title: '生成失败',
						icon: 'none',
					});
				},
				complete() {
					uni.hideLoading();
				},
			});
		});
		// #endif

		// #ifdef MP-WEIXIN
		await sleep(1000);

		wx.canvasToTempFilePath({
			canvas,
			height: postHeight.value,
			success: function(res) {
				posterImg.value = res.tempFilePath;
				showPosterPopup(true);
			},
			fail(err) {
				uni.showToast({
					title: '生成失败',
					icon: 'none',
				});
			},
			complete() {
				uni.hideLoading();
			},
		});
		// #endif
	};
	const showPosterPopup = (flag) => {
		posterPopupInstance.value[flag ? 'open' : 'close']();
	};

	// * 生成二维码
	const generateQrCode = (data) => {
		return new Promise((resolve, reject) => {
			uQRCode.make({
				canvasId: 'qrcode',
				componentInstance: this,
				text: data,
				size: 150,
				margin: 0,
				backgroundColor: '#ffffff',
				foregroundColor: '#000000',
				fileType: 'png',
				errorCorrectLevel: uQRCode.errorCorrectLevel.H,
				success: (res) => {
					resolve(res);
				},
				fail: () => {
					reject(false);
				},
			});
		});
	};

	// #ifdef MP-WEIXIN
	// * 小程序保存至手机相册
	const preservationPostImage = function() {
		wx.saveImageToPhotosAlbum({
			filePath: posterImg.value,
			success(res) {
				showPopup(false);
				uni.showToast({
					title: '保存成功',
					icon: 'success',
				});
			},
			fail() {
				openSetting();
			},
		});
	};
	// * 打开授权设置
	const openSetting = () => {
		wx.getSetting({
			success(res) {
				if (res.authSetting['scope.writePhotosAlbum'] === false) {
					// * 用户拒绝授权保存图片至相册
					uni.showModal({
						title: '提示',
						content: '即将打开设置页，请允许保存至相册权限,请确认是否允许自动前往设置？',
						confirmColor: primaryColor.value,
						success(res) {
							res.confirm && wx.openSetting();
						},
					});
				}
			},
		});
	};
	// #endif
</script>

<style lang="scss" scoped>
	.swiper_box {
		width: 750rpx;
		height: 750rpx;
	}

	::v-deep .uni-swiper__dots-item {
		height: 4px !important;
		width: 4px !important;
	}

	::v-deep .uni-swiper__dots-long {
		width: 15px !important;
	}

	.panel {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 0 2px;

		.price {
			flex: 1;
			display: flex;
			align-items: baseline;
		}

		.now_price {
			font-size: 20px;
			font-weight: bold;
			color: v-bind(secondaryColor);

			.num {
				font-size: 24px;
			}
		}

		.origin_price {
			margin-left: 14px;
			font-size: 12px;
			color: #999;
			text-decoration: line-through;
		}

		.saled {
			font-size: 12px;
			color: #999;
		}
	}

	.name_c {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.name {
			flex: 1;
			margin: 5px 0;
			padding-right: 10px;
			font-size: 16px;
		}

		.share {
			flex-shrink: 0;
			width: 22px;
			height: 22px;
		}
	}

	.sub_name {
		color: #999;
	}

	.service {
		display: flex;
		align-items: center;
		padding: 14px 0;
		border-bottom: 1px solid #f7f7f7;

		.label {
			flex: 1;
		}

		.method {
			display: flex;
			align-items: center;
			padding-left: 20px;

			::v-deep .uni-icons {
				margin-right: 2px;
			}
		}
	}

	.detail_head_c {
		padding: 14px 0 0;
		font-size: 16px;

		.line {
			margin: 0 10px;
			width: 70px;
			height: 1px;
			background-color: #bfbfbf;
		}
	}

	.detail_content {
		padding: 10px 0;
		word-wrap: break-word;
		word-break: break-word;
		white-space: normal !important;
	}

	.brace {
		height: 100px;
	}

	.fixed_bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 5px 10px;
		background-color: #fff;
		z-index: 9;

		.main {
			display: flex;
			align-items: center;
		}

		.left {
			display: flex;
			padding-right: 20px;

			.item {
				text-align: center;
			}

			.icon_c {
				width: 44px;
				height: 25px;
				overflow: hidden;
			}

			.action_bar_icon {
				width: 20px;
				height: 20px;
			}

			.text {
				font-size: 12px;
				color: #666;
			}
		}

		.button_c {
			flex: 1;
			display: flex;

			.button {
				text-align: center;
				flex: 1;
				padding: 10px 0;
				color: #fff;

				&:first-child {
					border-radius: 30px 0 0 30px;
					background-color: v-bind(primaryColor);
				}

				&:last-child {
					border-radius: 0 30px 30px 0;
					background-color: #2e3040;
				}
			}
		}
	}

	/*加购、购买弹出层全部样式*/
	.pupup_choose_c {
		position: relative;
		padding: 17px 14px;
		border-radius: 20px 20px 0 0;
		background-color: #fff;

		.closeable {
			position: absolute;
			right: 14px;
			top: 10px;
		}

		.label {
			padding-bottom: 2px;
			font-weight: bold;
			color: #333;
		}

		.goods {
			display: flex;

			.image {
				flex-shrink: 0;
				width: 88px;
				height: 88px;
				overflow: hidden;
				border-radius: 5px;
			}

			.right_content {
				flex: 1;
				padding: 4px 0 4px 10px;
				display: flex;
				flex-direction: column;
				height: 80px;

				.price {
					flex: 1;
					font-weight: bold;
					color: #f1b019;

					.num {
						font-size: 18px;
					}
				}

				.name {
					margin: 4px 0;
					font-size: 16px;
				}

				.sub_name {
					color: #868686;
				}
			}
		}

		.attr {
			padding-top: 20px;

			.children_c {
				display: flex;
				flex-wrap: wrap;

				.children {
					text-align: center;
					margin-right: 20px;
					margin-top: 5px;
					padding: 4px 10px;
					background: #f6f6f6;
					border-radius: 14px;
					min-width: 40px;
				}

				.active {
					background: v-bind(primaryColor);
					color: #fff;
				}
			}
		}

		.stock {
			padding: 45px 0 10px;
			color: #868686;
		}

		.sum_c {
			display: flex;
			justify-content: space-between;
			padding-bottom: 34px;
		}

		.button {
			background: v-bind(primaryColor);
			border-radius: 30px;
			font-size: 15px !important;
		}
	}

	/*分享弹出层全部样式*/
	.choose_share_methods {
		position: relative;
		border-radius: 20px 20px 0 0;
		background-color: #fff;
		text-align: center;

		.closeable {
			position: absolute;
			right: 14px;
			top: 10px;
		}

		.title {
			padding-top: 12px;
			padding-bottom: 20px;
			font-size: 16px;
			font-weight: bold;
		}

		.methods_c {
			display: flex;
			padding: 20px 14px;

			.item {
				text-align: center;

				&+.item {
					margin-left: 24px;
				}

				.icon {
					width: 56px;
					height: 56px;
					border-radius: 50%;
					background-color: #f5f5f5;
				}

				.text {
					padding-top: 5px;
					color: #666;
					font-size: 13px;
				}
			}
		}

		.brace {
			height: 8px;
			background-color: #f5f5f5;
		}

		.cancel {
			padding: 20px 0;
			color: #666;
		}
	}

	/*海报相关全部样式*/
	.poster_canvas {
		position: fixed;
		top: 9999px;
	}

	.qrcode_canvas {
		position: fixed;
		top: 9999px;
	}

	.post_c {
		position: relative;
		border-radius: 20rpx;
		overflow: hidden;
		background-color: #fff;

		.save_tip {
			position: absolute;
			bottom: 16rpx;
			left: 0;
			right: 0;
			text-align: center;
			font-size: 24rpx;
			font-weight: bold;
			z-index: 9;
		}

		.close {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			z-index: 9;
		}

		.img {
			display: flex;
			width: 600rpx;
			border-radius: 20rpx;
		}
	}

	.save {
		margin: 40rpx auto 0;
		width: 380rpx;
		height: 88rpx;
		border-radius: 44rpx;
		background: linear-gradient(180deg, #ffe3a1 4%, #ff8c00 100%);
		font-size: 32rpx;
		color: #935100;
		font-weight: bold;
	}
</style>